<template>
  <div class="index-box">
    <div class="goods-detail flex flex-sb pd-20">
      <div class="detail-left flex-none">
        <div class="detail-img">
          <el-image style="width: 100%; height: 100%" :src="detail.img" fit="fill"></el-image>
        </div>
        <div class="flex flex-sb mt-5">
          <div class="fs-13">
            <div>
              发布者：{{ detail.publish.name }}
            </div>
            <div class="mt-5">  
              发布时间：{{ detail.publish.time }}
            </div>
          </div>
          <div>
            <star-btn :star="detail.star" @satrClick="starClick"></star-btn>
          </div>
        </div>
      </div>
      <div class="detail-right">
        <el-table :data="tableData" :header-row-class-name="headerName" :row-class-name="tableRowClassName">
          <el-table-column align="center" prop="type" label="美食名称(编号)">
            <!-- #row -->
            <template #default="{ row }">
              <div class="t-l">
                {{ row.type }}：{{ row.text }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="comment-box flex flex-dc">
      <div class="common-input-content flex flex-ac flex-sb flex-none">
        <span class="flex-none c-f">评论：</span>
        <el-input class="common-input mr-15" v-model="common.value" @keydown.enter="commonClick" placeholder="请输入评论"></el-input>
        <!-- <input class="common-iput" type="text" v-model="common.value"> -->
        <el-button type="primary" @click="commonClick">发布评论</el-button>
      </div>
      <!-- 参照element 无线滚动写滚动加载 -->
      <div class="common-list pd-10 flex-auto">
          <div class="common-item mt-10 flex" v-for="(item,index) in common.list" :key="index">
            <div class="mr-10 item-avatar">
              <!-- 头像size调整大小 -->
              <el-avatar :src="item.avatar" fit="cover"></el-avatar>
            </div>
            <div>
              <div>
                {{item.name}}
              </div>
              <div>
                {{item.text}}
              </div>
              <div class="mt-5 fs-13">
                {{item.time}}
              </div>
            </div>
          </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import chuan from '@/assets/img/chuan.jpg';
import starBtn from '@/components/star-btn.vue';
export default {
  name: 'AfunctionThree',
  components:{starBtn},
  data() {
    return {
      detail: {
        img: chuan,
        type: '川菜',//分类
        taste: '很辣',//口味
        materials: '四川辣椒，八角，香叶，花椒，童子鸡',//材料
        means: '阿贾克斯大卡司打开就ask记得那时尽快你大家看大家看到就爱看的就看谁的较困难贷记卡是你的就看见看到安徽师范哈佛',//方法
        // 发布信息
        publish: {
          name: '测试用户',
          time: '2022-20-20'
        },
        // 收藏
        star: 0
      },
      tableData: [
        {
          type: '美食分类',
          text: '测试'
        },
        {
          type: '口味',
          text: '测试'
        },
        {
          type: '使用材料',
          text: '测试'
        },
        {
          type: '制作方法',
          text: '测试'
        }
      ],
      common:{
        value:'',
        list:[
          {
            name:'测试用户',
            avatar:chuan,
            text:'打卡萨凯撒的那是的接口氨基酸的的就按照现场宁可自己拿积分安居客你现在经常阿三数据库发觉案件真相聚餐费案件宣传中心差分',
            time:'2022-10-22'
          }
        ]
      }
    }
  },
  created() {
    this.getDetail();
    console.log(this.$route.params.id)
  },
  methods: {
    headerName() {
      return 'header-sty'
    },
    handleEdit(index, row) {
      console.log(index);
    },
    // 获取详情
    getDetail() {
      this.tableData[0].text = this.detail.type;
      this.tableData[1].text = this.detail.taste;
      this.tableData[2].text = this.detail.materials;
      this.tableData[3].text = this.detail.means;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return 'success-row'
      } else {
        return 'warning-row'
      }
    },
    // 评论点击事件
    commonClick(){
      console.log(this.common.value)
    },
    starClick(star,index){
      if(star == 0){
        this.detail.star = 1;
      }else{
        this.detail.star = 0
      }
    }
  }
}
</script>
  

<style  scoped>
.index-box{
  height: 100vh;
}
.goods-detail{
  height: 280px;
}
.detail-img {
  width: 500px;
  height: 200px;
  border-radius: 10px;
  overflow: hidden;
}
.comment-box{
  height: calc(100vh - 280px);
  background: #AFBADC;
  border: 1px solid #446DA9;
  box-sizing: border-box;
}
.common-input-content{
  border-bottom: 1px solid #446DA9;
  padding: 10px;
}
/* 隐藏滚动条 */
.common-list{
  overflow: scroll;
}
.common-list::-webkit-scrollbar {
    display: none;
}

.t-l {
  text-align: left;
}

.detail-right {
  width: 600px;
}
</style>

<style>
/* 设置element表格表头样式 */
.el-table .header-sty .el-table__cell {
  color: #fff;
  background-color: #6096E6;
}
.el-table .warning-row {
  --el-table-tr-bg-color: ##D2DDF5;
}
.el-table .success-row {
  --el-table-tr-bg-color: #EAEFFA;
}
/* 评论输入框 */
.common-input-content .el-input__wrapper{
  background: #AFBADC;
  border: none;
  box-shadow: none;
}
.common-input-content .el-input__wrapper .el-input__inner{
  color: #fff;

}
</style>
  